'use strict'
import React, { Component, PropTypes } from 'react'

class AsyncText extends Component {
    componentDidMount() {
        const {text, url, field, callFun} = this.props;
        if(text == null) {
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'JSON',
                success: function (resp) {
                    if(resp[field]) {
                        callFun(resp);
                    }
                }
            });
        }
    }

    render() {
        const {text, styleClass} = this.props;

        //console.log('AsyncText text => ' + text);

        let elmClass = styleClass || '';

        if (text == null) {
            elmClass = elmClass;
            return (
                <strong className={elmClass}>
                    <span className="async-text-loading">
                        <i className="double-bounce1"></i>
                        <i className="double-bounce2"></i>
                    </span>
                </strong>
            )
        }
        else if (text != '') {
            elmClass += ' animated fadeIn';
            return (
                <span className={elmClass}>{text}</span>
            )
        }
        else {
            return (
                <span className={elmClass}>-</span>
            )
        }
    }
}

export default AsyncText;